<template>
	<view class="pics">
		<scroll-view class="left"  scroll-y >
		<view
		:class="actInd===index?'active':''" 
		@click="getActive(index)" 
		v-for="(item,index) in pics" :key="index">
		{{item.floor_title.name}}
		</view>
		</scroll-view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				pics:[],
				actInd:0
				
			}
		},
		methods: {
			getActive(index){
				this.actInd = index
			},
			
			async getPics(){
				const getpics=  await this.$myRequest({
					url:'/home/floordata',
					method:'GET'
				}).then((res)=>{
					console.log(res)
					// this.swiper = res.data.message
					// console.log(this.swiper)
					this.pics = res.data.message
					console.log(this.pics)
				})
			}
		},
		onLoad() {
			this.getPics()
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		.left{
			width: 200rpx; 
			height: 100%;
			border-right: 1px slid #eee;
			view{
				height: 60px;
				// width: 150rpx;
				line-height: 60px;
				
				text-align: center;
				font-size: 30rpx;
				// margin-left: 5rpx;
				// padding: 10rpx 30rpx;
				border-top: 1px solid #eee;
				// border-right: 1px solid #ccc;
			}
		}
	}
	
	.active{
		background-color: $base-color;
		color:#FFFFFF;	
	}

</style>
